<template>
  <div>
    <div class="containerMall-head">
      <ul class="containerMall-head_search">
        <li class="containerMall-head_item head_item safe_padding"><img src="../assets/icon/service.png" alt=""></li>
        <li class="containerMall-head_item item_center"><img src="../assets/icon/search.png" alt=""><input type="text" placeholder="超值大礼包"></li>
        <li class="containerMall-head_item head_item head_item_right"><img src="../assets/icon/shoppingcart.png" alt=""></li>
      </ul>
      <Containermenu/>
    </div>
    <router-view/>
    <foot ref="foot"></foot>
    </div>
</template>
<script>

  import Containermenu from '@pcpt/Containermenu';
  import foot from '@pcpt/foot';
  /*  import  swiper from '@'*/
  export default {
    name: "Mall",
    components:{
      foot,
      Containermenu,
    },
    mounted(){
       this.$refs.foot.index=3;
      this.scroller= new this.$BS('.betterScroll',{
        scrillX:false,
        scrollY:true,
        click:true,
      });
    },
  }
</script>

<style lang="scss">
 *{
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 .betterScroll{
   width: 100vw;
   height: 90vh;
   overflow: hidden;
   position: relative;
   background:#f5f5f5;
 }
 .containerMall-head{
   z-index: 10;
   position: fixed;
   box-sizing: border-box;
   height: 2.21rem;
   width: 100vw;
   border-bottom: 1px solid #f2f2f2;
   vertical-align: middle;
   background: #fff;
   .containerMall-head_search {
     .containerMall-head_item{
       float: left;
       /*line-height: 1.0666rem;
       vertical-align: middle;*/
       position: relative;
     }
     .head_item_right{
       img{
         right: 0;
         padding-right: .4666rem;
       }
     }
     .head_item{
       box-sizing: border-box;
       width: 20%;
       height: 1.13rem;
       img{
         margin-top: .25rem;
       }
     }
     .safe_padding{
       padding-left: .4666rem;
     }
     .item_center{
       width: 60%;
       border-radius: .2rem;
       margin-top:.1rem;
       background: #f5f5f5;
       height: .9rem;
       line-height: .9rem;
       margin-bottom: .1rem;
       img{
         margin-left: .2rem;
       }
       input[type=text]{
         font-size: .37333rem;
         width: 4rem;
         margin-left: 1rem;
         height: .466rem;
         line-height: 1.13rem;
         outline: none;
         border: none;
         background: #f5f5f5;
       }
     }
   }
 }
 .containerMall-head_search img{
   position: absolute;
   width: .5333rem;
   height: .5333rem;
   margin-top: .15rem;
 }
  .containerMall{
    width: 100vw;
    position: fixed;
  }
  .container-content{
    margin-top:2.2rem;
    width: 100vw;
    height:9.8rem;
    background: #fff;
    .container-swiper{
      width: 100vw;
      height:4rem;
      border: 1px solid #ebebeb;
      box-sizing:border-box;
    }
    .container-option{
       width: 100vw;
       height: 2.4rem;
      .container-option_item{
        width: 20%;
        height: 2.4rem;
        float:left;
        background: #fff;
        text-align: center;
        p{
          font-size: .37333rem;
          color: #333;
          line-height: .666rem;
          text-align: center;
        }
        div{
          width: 1.36rem;
          height: 1.36rem;
          border-radius: 100%;
          background: aquamarine;
          margin-left: .3rem;
          margin-top: .2rem;
        }
      }
    }
    .content-option-ul{
      padding-left: .3067rem;
      text-align: center;
      .content-option_item{
        float: left;
        box-sizing: border-box;
        display: inline-block;
        width: 4.4266rem;
        height: 2.3466rem;
        border-radius: .2rem;
        background-color: cadetblue;
      }
      .safe_indent{
        margin-left: .533rem;
      }
    }
  }
  .container-content_Spike{
    width: 100vw;
    height: 5.89333rem;
    margin-top: .22667rem;
    .ul_Spick{
      width: 200vw;
      height: 4rem;
        .ul-item_Spick{
          box-sizing: border-box;
          width: 2.666rem;
          height: 4rem;
          display: inline-block;
          float: left;
          border: 1px solid #f5f5f5;
          background: #FFCD8A;
          window-shadow: 2px 5px 5px 0 rgba(126,126,126,.7);
          border-radius: .18666rem;
          margin-left: .2666rem;
        }
      }
    }
  .container-content_activity{
    width: 100vw;
    height: 7.2rem;
    margin-top: .213rem;
    .activity_box{
      height:  5.6rem;
      width: 100vw;
      background: cadetblue;
      position: relative;
    }
    .activity-boxs{
      width: 100vw;
      height: 6rem;
      background: #fff;
      position: relative;
    }
    .activity_box_title{
      margin-left: .32rem;
      margin-right: .32rem;
      display: block;
      height: 1.8133rem;
      background: brown;
      box-sizing: border-box;
    }
  }
 .activity_ul{
   .activity_item{
     margin-top: .2rem;
     margin-left: .5rem;
     float: left;
     width: 2.3333rem;
     height: 3.4666rem;
     border: 1px solid #f5f5f5;
   }
   .activity_img{
     width: 2.4666rem;
     height: 2.3333rem;
   }
 }
  .safe_padding{
    padding-left: .32rem;
    padding-right: .32rem;
  }
 .Spick_title{
   text-indent: .16rem;
   font-size: .4266rem;
   line-height: 1.6rem;
 }
  .content_bgcolor{
    background: #fff;
  }
  .content_marginTop{
    margin-top: .21333rem;
  }
</style>
